/*
 * @Author: 肖思汗 
 * @Date: 2025-07-13 12:57:28 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-13 14:46:03
 */
import { Text, View } from '@tarojs/components';
import { observer } from "mobx-react-lite";
import PageLayer from 'src/components/PageLayer/PageLayer';
import styles from './myOrderDetail.module.less';
import myOrderDetailStore from './myOrderDetailStore';
import utilsStore from 'src/utils/utilsStore';
import utils from 'src/utils/utils';
import Taro from '@tarojs/taro';
import { Button } from '@nutui/nutui-react-taro';

const MyOrderDetail = observer(() => {

    const { orderDetail } = myOrderDetailStore;

    const getOrderStateText = (state) => {
        switch (state) {
            case 'WAIT_PAY': return '待支付';
            case 'WAIT_DELIVERY': return '待发货';
            case 'DELIVERED': return '已发货';
            case 'RECEIVED': return '已收货';
            case 'CLOSED': return '订单关闭';
            default: return '未知状态';
        }
    };

    const getStateColor = (state) => {
        switch (state) {
            case 'WAIT_PAY': return '#ff4d4f';
            case 'WAIT_DELIVERY': return '#faad14';
            case 'DELIVERED': return '#1890ff';
            case 'RECEIVED': return '#52c41a';
            case 'CLOSED': return '#8c8c8c';
            default: return '#d9d9d9';
        }
    };

    const handleCopyOrderCode = () => {
        if (orderDetail?.orderCodeMain) {
            Taro.setClipboardData({
                data: orderDetail.orderCodeMain,
                success: () => {
                    Taro.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 2000
                    });
                },
                fail: () => {
                    Taro.showToast({
                        title: '复制失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        }
    };

    return (
        <PageLayer
            title='订单详情'
            showBack={true}
            hasTabBar={false}
            className={styles.myOrderDetail}
        >
            {orderDetail && (
                <View
                    className={styles.content}
                    style={{
                        marginBottom: utilsStore.safeAreaBottom || utils.rpx2px(20)
                    }}
                >
                    {/* 订单基本信息 */}
                    <View className={styles.section}>
                        <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'top', marginBottom: '10px' }}>
                            <Text style={{ flex: 1 }} className={styles.sectionTitle}>订单信息</Text>
                            <Button
                                type='primary'
                                size='small'
                                className={styles.copyButton}
                                onClick={handleCopyOrderCode}
                            >
                                复制单号
                            </Button>
                        </View>
                        <View className={styles.row}>
                            <Text>订单编号</Text>
                            <Text>{orderDetail.orderCodeMain}</Text>
                        </View>
                        <View className={styles.row}>
                            <Text>订单状态</Text>
                            <Text style={{ color: getStateColor(orderDetail.orderState) }}>
                                {getOrderStateText(orderDetail.orderState)}
                            </Text>
                        </View>
                        <View className={styles.row}>
                            <Text>下单时间</Text>
                            <Text>{orderDetail.orderTime}</Text>
                        </View>
                    </View>

                    {/* 支付信息 */}
                    <View className={styles.section}>
                        <Text className={styles.sectionTitle}>支付信息</Text>
                        <View className={styles.row}>
                            <Text>原价</Text>
                            <Text className={styles.priceHighlight}>¥{orderDetail.platformPrice}</Text>
                        </View>
                        <View className={styles.row}>
                            <Text>实付金额</Text>
                            <Text className={styles.priceHighlight}>¥{orderDetail.actualPrice}</Text>
                        </View>
                        <View className={styles.row}>
                            <Text>优惠金额</Text>
                            <Text className={styles.priceHighlight}>-¥{orderDetail.couponPrice}</Text>
                        </View>
                        <View className={styles.row}>
                            <Text>支付渠道</Text>
                            <Text>{orderDetail.payChannel}</Text>
                        </View>
                    </View>

                    {/* 物流信息 */}
                    <View className={styles.section}>
                        <Text className={styles.sectionTitle}>物流信息</Text>
                        <View className={styles.row}>
                            <Text>快递公司</Text>
                            <Text>{orderDetail.deliveryName}</Text>
                        </View>
                        <View className={styles.row}>
                            <Text>运单号</Text>
                            <Text>{orderDetail.deliveryCode}</Text>
                        </View>
                        <View className={styles.row}>
                            <Text>运费</Text>
                            <Text>¥{orderDetail.deliveryPrice}</Text>
                        </View>
                    </View>

                    {/* 收货信息 */}
                    <View className={styles.section}>
                        <Text className={styles.sectionTitle}>收货信息</Text>
                        <View className={styles.row}>
                            <Text>收货人</Text>
                            <Text>{orderDetail.receiveName}</Text>
                        </View>
                        <View className={styles.row}>
                            <Text>联系电话</Text>
                            <Text>{orderDetail.receivePhone}</Text>
                        </View>
                        <View className={styles.row}>
                            <Text>收货地址</Text>
                            <Text>{orderDetail.receiveAddress}</Text>
                        </View>
                        {/* <View className={styles.row}>
                            <Text>订单备注</Text>
                            <Text>{orderDetail.orderRemark}</Text>
                        </View> */}
                    </View>
                </View>
            )}
        </PageLayer>
    )
});

export default MyOrderDetail;